<template>
  <div class="qrcode-container">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <div class="logo-section">
            <div class="logo">
              <QrcodeOutlined class="logo-icon" />
            </div>
            <div class="title-section">
              <h1 class="page-title">蒜苔二维码</h1>
              <p class="page-subtitle">专业的二维码生成工具，支持多种类型，简单易用</p>
            </div>
          </div>
          <div class="header-actions">
            <!-- 用户登录状态显示 -->
            <div v-if="userStore.isLoggedIn" class="user-info">
              <span class="welcome-text">欢迎，{{ displayUserName }}</span>
              <a-button @click="goToAdmin" type="primary" class="admin-btn">
                <template #icon>
                  <SettingOutlined />
                </template>
                进入后台
              </a-button>
            </div>
            <a-button @click="goToDecoder" class="decoder-btn">
              <template #icon>
                <QrcodeOutlined />
              </template>
              蒜苔解码器
            </a-button>
            <a-button @click="goBack" class="back-btn">
              <template #icon>
                <ArrowLeftOutlined />
              </template>
              返回首页
            </a-button>
          </div>
        </div>
      </div>

      <!-- 二维码类型选择 -->
      <div class="type-selection-section">
        <div class="type-selection-content">
          <h2 class="section-title">
            <span class="title-icon">📱</span>
            选择二维码类型
          </h2>
          <div class="type-grid horizontal">
            <div 
              v-for="type in qrCodeTypes" 
              :key="type.value"
              class="type-card compact"
              :class="{ active: selectedType === type.value }"
              @click="selectType(type.value)"
            >
              <div class="type-icon" :style="{ color: type.color }">
                <component :is="type.icon" />
              </div>
              <div class="type-info">
                <div class="type-name">{{ type.label }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <div class="main-content">
      <!-- 左侧：内容输入 -->
      <div class="left-panel">

        <!-- 内容输入区域 -->
        <div v-if="selectedType" class="content-input-section">
          <h2 class="section-title">
            <span class="title-icon">✏️</span>
            输入内容
          </h2>
          
          <div class="input-container">
            <!-- 通用设置 -->
            <div class="input-group">
              <label class="input-label">二维码名称</label>
              <a-input 
                v-model:value="formData.common.name"
                placeholder="为您的二维码起个名字（可选）"
                class="input-field"
              />
            </div>

            <!-- URL输入 -->
            <div v-if="selectedType === 1" class="type-inputs">
              <div class="input-group">
                <label class="input-label">网址链接 <span class="required">*</span></label>
                <a-input 
                  v-model:value="formData.url.link"
                  placeholder="请输入完整的网址链接，如：https://www.example.com"
                  class="input-field"
                  :status="urlValidationStatus"
                  @blur="validateUrl"
                >
                  <template #prefix>
                    <LinkOutlined class="input-prefix-icon" />
                  </template>
                </a-input>
                <div v-if="urlValidationMessage" class="validation-message" :class="urlValidationStatus">
                  {{ urlValidationMessage }}
                </div>
              </div>
              <div class="input-group">
                <label class="input-label">链接标题</label>
                <a-input 
                  v-model:value="formData.url.title"
                  placeholder="链接标题（可选）"
                  class="input-field"
                />
              </div>
            </div>

            <!-- 文本类型 -->
            <div v-if="selectedType === 2" class="type-inputs">
              <div class="input-group">
                <label class="input-label">文本内容 <span class="required">*</span></label>
                <a-textarea 
                  v-model:value="formData.text.content"
                  placeholder="请输入要生成二维码的文本内容"
                  :rows="4"
                  show-count
                  :maxlength="500"
                  class="input-field"
                />
              </div>
            </div>

            <!-- WiFi配置 -->
            <div v-if="selectedType === 3" class="type-inputs">
              <div class="input-group">
                <label class="input-label">WiFi名称 (SSID) <span class="required">*</span></label>
                <a-input 
                  v-model:value="formData.wifi.ssid"
                  placeholder="WiFi名称(SSID)"
                  class="input-field"
                >
                  <template #prefix>
                    <WifiOutlined class="input-prefix-icon" />
                  </template>
                </a-input>
              </div>
              <div class="input-group">
                 <label class="input-label">WiFi密码</label>
                 <a-input-password 
                   v-model:value="formData.wifi.password"
                   placeholder="请输入WiFi密码（无密码可留空）"
                   class="input-field"
                 />
               </div>
               <div class="input-group">
                 <label class="input-label">加密类型</label>
                 <a-select v-model:value="formData.wifi.encryption" placeholder="选择加密类型" class="input-field">
                   <a-select-option value="WPA">WPA/WPA2</a-select-option>
                   <a-select-option value="WEP">WEP</a-select-option>
                   <a-select-option value="nopass">无密码</a-select-option>
                 </a-select>
               </div>
            </div>

            <!-- 联系人信息 -->
            <div v-if="selectedType === 4" class="type-inputs">
              <div class="input-row">
                <div class="input-group half">
                  <label class="input-label">姓氏</label>
                  <a-input 
                    v-model:value="formData.vcard.lastName"
                    placeholder="姓氏"
                    class="input-field"
                  />
                </div>
                <div class="input-group half">
                  <label class="input-label">名字 <span class="required">*</span></label>
                  <a-input 
                    v-model:value="formData.vcard.firstName"
                    placeholder="名字"
                    class="input-field"
                  />
                </div>
              </div>
              <div class="input-group">
                <label class="input-label">公司/组织</label>
                <a-input 
                  v-model:value="formData.vcard.organization"
                  placeholder="公司/组织"
                  class="input-field"
                >
                  <template #prefix>
                    <BankOutlined class="input-prefix-icon" />
                  </template>
                </a-input>
              </div>
              <div class="input-group">
                <label class="input-label">电话号码</label>
                <a-input 
                  v-model:value="formData.vcard.phone"
                  placeholder="请输入手机号码，如：13800138000"
                  class="input-field"
                  :status="phoneValidationStatus"
                  @blur="validatePhone"
                  @input="formatPhone"
                >
                  <template #prefix>
                    <PhoneOutlined class="input-prefix-icon" />
                  </template>
                </a-input>
                <div v-if="phoneValidationMessage" class="validation-message" :class="phoneValidationStatus">
                  {{ phoneValidationMessage }}
                </div>
              </div>
              <div class="input-group">
                <label class="input-label">邮箱地址</label>
                <a-input 
                  v-model:value="formData.vcard.email"
                  placeholder="请输入邮箱地址，如：example@domain.com"
                  class="input-field"
                  :status="emailValidationStatus"
                  @blur="validateEmail"
                >
                  <template #prefix>
                    <MailOutlined class="input-prefix-icon" />
                  </template>
                </a-input>
                <div v-if="emailValidationMessage" class="validation-message" :class="emailValidationStatus">
                  {{ emailValidationMessage }}
                </div>
              </div>
            </div>

            <!-- 地理位置 -->
            <div v-if="selectedType === 5" class="type-inputs">
              <div class="input-group">
                <label class="input-label">选择位置 <span class="required">*</span></label>
                <MapLocationPicker
                  v-model="locationData"
                  @change="handleLocationChange"
                  placeholder="请搜索或选择地理位置"
                />
              </div>
            </div>

            <!-- 图片类型 -->
            <div v-if="selectedType === 6" class="type-inputs">
              <div class="input-group">
                <label class="input-label">上传图片 <span class="required">*</span></label>
                <SimpleFileUpload
                  v-model="formData.image.imageUrl"
                  accept="image/*"
                  :allowed-types="['.jpg', '.jpeg', '.png']"
                  :max-size="2"
                  button-text="上传图片"
                  upload-url="/api/oss/upload?isPublic=true"
                  @success="handleImageUploadSuccess"
                  @error="handleImageUploadError"
                />
                <div class="upload-tip">支持 JPG、PNG 格式，文件大小不超过 2MB</div>
              </div>
            </div>

            <!-- 小程序类型 -->
            <div v-if="selectedType === 7" class="type-inputs">
              <div class="input-group">
                <label class="input-label">小程序名称 <span class="required">*</span></label>
                <a-input 
                  v-model:value="formData.miniProgram.name"
                  placeholder="请输入小程序名称"
                  class="input-field"
                >
                  <template #prefix>
                    <AppstoreOutlined class="input-prefix-icon" />
                  </template>
                </a-input>
              </div>
              <div class="input-group">
                <label class="input-label">小程序码 <span class="required">*</span></label>
                <SimpleFileUpload
                  v-model="formData.miniProgram.codeImage"
                  accept="image/*"
                  :allowed-types="['.jpg', '.jpeg', '.png']"
                  :max-size="10"
                  button-text="上传小程序码"
                  upload-url="/api/oss/upload?isPublic=true"
                  @success="handleMiniProgramUploadSuccess"
                  @error="handleMiniProgramUploadError"
                />
                <div class="upload-tip">上传小程序码图片，支持 JPG、PNG 格式</div>
              </div>
            </div>

            <!-- 轮询码类型 -->
             <div v-if="selectedType === 8" class="type-inputs">
               <div class="input-group">
                 <label class="input-label">轮询项目 <span class="required">*</span></label>
                 <div class="polling-items">
                   <div v-for="(item, index) in formData.polling.items" :key="index" class="polling-item">
                     <div class="polling-item-header">
                       <span class="polling-item-title">项目 {{ index + 1 }}</span>
                       <a-button v-if="formData.polling.items.length > 1" @click="removePollingItem(index)" type="text" danger size="small">
                         删除
                       </a-button>
                     </div>
                     <div class="polling-item-content">
                       <div class="input-row">
                         <div class="input-group half">
                           <label class="input-label">类型</label>
                           <a-select v-model:value="item.type" placeholder="选择类型" class="input-field">
                             <a-select-option :value="1">网址链接</a-select-option>
                             <a-select-option :value="2">文本内容</a-select-option>
                             <a-select-option :value="3">WiFi信息</a-select-option>
                             <a-select-option :value="4">名片信息</a-select-option>
                             <a-select-option :value="5">地理位置</a-select-option>
                             <a-select-option :value="6">在线图片</a-select-option>
                           </a-select>
                         </div>
                         <div class="input-group half">
                           <!-- 在线图片类型显示图片上传组件 -->
                           <template v-if="item.type === 6">
                             <label class="input-label">图片上传</label>
                             <SimpleFileUpload
                               v-model="item.url"
                               accept="image/*"
                               :allowed-types="['.jpg', '.jpeg', '.png']"
                               :max-size="10"
                               button-text="上传图片"
                               upload-url="/api/oss/upload?isPublic=true"
                               @success="(response, file) => handlePollingUploadSuccess(response, file, index)"
                               @error="(error, file) => handlePollingUploadError(error, file, index)"
                               @remove="() => removePollingImage(index)"
                             />
                           </template>
                           <!-- 其他类型显示文本输入框 -->
                           <template v-else>
                             <label class="input-label">内容或地址</label>
                             <a-input 
                               v-model:value="item.url"
                               :placeholder="getPollingPlaceholder(item.type)"
                               class="input-field"
                             />
                           </template>
                         </div>
                       </div>
                     </div>
                   </div>
                   <a-button @click="addPollingItem" type="dashed" block class="add-polling-btn">
                     <template #icon>
                       <PlusOutlined />
                     </template>
                     添加轮询项目
                   </a-button>
                 </div>
               </div>
             </div>

            <!-- 群码类型 -->
            <div v-if="selectedType === 9" class="type-inputs">
              <div class="group-section">
                <h4 class="group-section-title">主群设置</h4>
                <div class="input-group">
                  <label class="input-label">主群标题</label>
                  <a-input 
                    v-model:value="formData.group.mainGroupTitle"
                    placeholder="主群二维码"
                    class="input-field"
                  />
                </div>
                <div class="input-group">
                  <label class="input-label">主群描述</label>
                  <a-input 
                    v-model:value="formData.group.mainGroupDesc"
                    placeholder="扫码进主群"
                    class="input-field"
                  />
                </div>
                <div class="input-group">
                  <label class="input-label">主群二维码 <span class="required">*</span></label>
                  <SimpleFileUpload
                    v-model="formData.group.mainGroupImage"
                    accept="image/*"
                    :allowed-types="['.jpg', '.jpeg', '.png']"
                    :max-size="10"
                    button-text="上传主群码"
                    upload-url="/api/oss/upload?isPublic=true"
                    @success="handleMainGroupUploadSuccess"
                    @error="handleMainGroupUploadError"
                  />
                </div>
              </div>
              
              <div class="group-section">
                <h4 class="group-section-title">备用群设置</h4>
                <div class="input-group">
                  <label class="input-label">备用群标题</label>
                  <a-input 
                    v-model:value="formData.group.backupGroupTitle"
                    placeholder="备用群二维码"
                    class="input-field"
                  />
                </div>
                <div class="input-group">
                  <label class="input-label">备用群描述</label>
                  <a-input 
                    v-model:value="formData.group.backupGroupDesc"
                    placeholder="主群已满可加备用群"
                    class="input-field"
                  />
                </div>
                <div class="input-group">
                  <label class="input-label">备用群二维码</label>
                  <SimpleFileUpload
                    v-model="formData.group.backupGroupImage"
                    accept="image/*"
                    :allowed-types="['.jpg', '.jpeg', '.png']"
                    :max-size="10"
                    button-text="上传备用群码"
                    upload-url="/api/oss/upload?isPublic=true"
                    @success="handleBackupGroupUploadSuccess"
                    @error="handleBackupGroupUploadError"
                  />
                </div>
              </div>
            </div>

            <!-- 描述信息 -->
            <div class="input-group">
              <label class="input-label">描述信息</label>
              <a-textarea 
                v-model:value="formData.common.description"
                placeholder="添加描述信息（可选）"
                :rows="2"
                :maxlength="200"
                show-count
                class="input-field"
              />
            </div>

          </div>
        </div>
        
        <!-- 生成按钮 -->
        <div class="generate-section">
          <a-button 
            type="primary" 
            size="large" 
            @click="generateQrCode"
            :loading="isGenerating"
            class="generate-btn"
            block
          >
            <template #icon>
              <QrcodeOutlined />
            </template>
            {{ isGenerating ? '生成中...' : '生成二维码' }}
          </a-button>
        </div>
      </div>

      <!-- 右侧：二维码预览 -->
      <div class="right-panel">
        <div class="preview-section">
          <h2 class="section-title">
            <span class="title-icon">🔍</span>
            二维码预览
          </h2>
          
          <!-- 有二维码时的预览 -->
          <div v-if="qrCodeUrl" class="preview-container">
            <div class="qrcode-display">
              <div class="qr-image-container">
                <qrcode-vue
                  :value="qrCodeUrl"
                  :size="200"
                  level="H"
                  class="qrcode-image"
                />
              </div>
              <div class="qrcode-info" v-if="qrCodeInfo">
                <div class="info-item">
                  <span class="info-label">类型：</span>
                  <span class="info-value">{{ getTypeName(selectedType) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">内容长度：</span>
                  <span class="info-value">{{ getContentLength() }} 字符</span>
                </div>
                <div class="info-item" v-if="qrCodeInfo.qrCodeName">
                  <span class="info-label">名称：</span>
                  <span class="info-value">{{ qrCodeInfo.qrCodeName }}</span>
                </div>
              </div>
            </div>
            
            <div class="qr-actions">
              <a-button @click="downloadQrCode" class="action-btn" type="primary" block>
                <template #icon>
                  <DownloadOutlined />
                </template>
                下载二维码
              </a-button>
              <a-button @click="copyQrCodeUrl" class="action-btn" block>
                <template #icon>
                  <CopyOutlined />
                </template>
                复制链接
              </a-button>
              <a-button @click="shareQrCode" class="action-btn" block>
                <template #icon>
                  <ShareAltOutlined />
                </template>
                分享二维码
              </a-button>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-else class="empty-state">
            <div class="empty-content">
              <div class="empty-icon">
                <QrcodeOutlined />
              </div>
              <h3 class="empty-title">二维码预览</h3>
              <p class="empty-text">
                {{ selectedType ? '点击"生成二维码"按钮开始生成' : '请先选择二维码类型' }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import QrcodeVue from 'qrcode.vue'
import html2canvas from 'html2canvas'
import {
  QrcodeOutlined,
  ArrowLeftOutlined,
  LinkOutlined,
  WifiOutlined,
  BankOutlined,
  PhoneOutlined,
  MailOutlined,
  EnvironmentOutlined,
  DownloadOutlined,
  CopyOutlined,
  ShareAltOutlined,
  ReloadOutlined,
  FileTextOutlined,
  ContactsOutlined,
  PictureOutlined,
  PlusOutlined,
  IdcardOutlined,
  AppstoreOutlined,
  RetweetOutlined,
  TeamOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'
import { apiSuantaiQrcodeCreate, apiGenerateScanUrl } from '@/miaoma/suantaiqrcode/api'
import { QrCodeTypeMap } from '@/miaoma/suantaiqrcode/constants'
import SimpleFileUpload from '@/components/SimpleFileUpload.vue'
import MapLocationPicker from '@/components/MapLocationPicker.vue'

const router = useRouter()

// 用户状态管理
const userStore = useUserStore()

// 计算属性：获取显示的用户名
const displayUserName = computed(() => {
  if (userStore.userInfo) {
    return userStore.userInfo.realName || userStore.userInfo.username || '用户'
  }
  return '未登录'
})

// 组件挂载时获取用户信息
onMounted(async () => {
  if (userStore.token && !userStore.userInfo) {
    await userStore.fetchUserInfo()
  }
})

// 二维码类型配置（9种活码类型）
const qrCodeTypes = [
  {
    value: 1,
    label: '网址链接',
    description: '生成网站链接二维码',
    icon: LinkOutlined,
    color: '#1890ff'
  },
  {
    value: 2,
    label: '文本内容',
    description: '生成纯文本二维码',
    icon: FileTextOutlined,
    color: '#52c41a'
  },
  {
    value: 3,
    label: 'WiFi信息',
    description: '生成WiFi连接二维码',
    icon: WifiOutlined,
    color: '#722ed1'
  },
  {
    value: 4,
    label: '名片信息',
    description: '生成联系人名片二维码',
    icon: ContactsOutlined,
    color: '#fa8c16'
  },
  {
    value: 5,
    label: '地理位置',
    description: '生成地理位置二维码',
    icon: EnvironmentOutlined,
    color: '#eb2f96'
  },
  {
    value: 6,
    label: '在线图片',
    description: '上传图片生成二维码',
    icon: PictureOutlined,
    color: '#13c2c2'
  },
  {
    value: 7,
    label: '小程序',
    description: '生成小程序二维码',
    icon: AppstoreOutlined,
    color: '#fa541c'
  },
  {
    value: 8,
    label: '轮询码',
    description: '生成轮询二维码',
    icon: RetweetOutlined,
    color: '#ff4d4f'
  },
  {
    value: 9,
    label: '群码',
    description: '生成群组二维码',
    icon: TeamOutlined,
    color: '#722ed1'
  }
]

// 响应式数据
const selectedType = ref<number | null>(null)
const isGenerating = ref(false)
const qrCodeUrl = ref('')
const qrCodeInfo = ref<any>(null)

// 表单数据
const formData = reactive({
  common: {
    name: '',
    description: ''
  },
  text: {
    content: ''
  },
  url: {
    link: '',
    title: ''
  },
  wifi: {
    ssid: '',
    password: '',
    encryption: 'WPA'
  },
  vcard: {
    firstName: '',
    lastName: '',
    organization: '',
    phone: '',
    email: ''
  },
  location: {
    latitude: '',
    longitude: '',
    name: ''
  },
  image: {
    imageUrl: '',
    fileList: [] as UploadFile[]
  },
  miniProgram: {
    name: '',
    codeImage: '',
    fileList: [] as UploadFile[]
  },
  polling: {
    items: [{ type: 1, url: '' }] as Array<{ type: number; url: string }>
  },
  group: {
    mainGroupImage: '',
    mainGroupTitle: '主群二维码',
    mainGroupDesc: '扫码进主群',
    backupGroupImage: '',
    backupGroupTitle: '备用群二维码',
    backupGroupDesc: '主群已满可加备用群',
    mainFileList: [] as UploadFile[],
    backupFileList: [] as UploadFile[]
  }
})

// 地图选点数据
const locationData = ref()

// 验证状态
const urlValidationStatus = ref('')
const urlValidationMessage = ref('')
const phoneValidationStatus = ref('')
const phoneValidationMessage = ref('')
const emailValidationStatus = ref('')
const emailValidationMessage = ref('')

// 选择类型
const selectType = (type: number) => {
  selectedType.value = type
  // 清空之前的结果
  qrCodeUrl.value = ''
  qrCodeInfo.value = null
  // 清空地图选点数据
  if (type !== 5) {
    locationData.value = undefined
  }
}

// 重置表单
const resetForm = () => {
  selectedType.value = null
  qrCodeUrl.value = ''
  qrCodeInfo.value = null
  locationData.value = undefined
  
  // 重置表单数据
  Object.assign(formData, {
    common: { name: '', description: '' },
    text: { text: '' },
    url: { url: '', title: '' },
    wifi: { ssid: '', password: '', encryption: 'WPA' },
    vcard: { firstName: '', lastName: '', organization: '', phone: '', email: '' },
    location: { latitude: '', longitude: '', name: '' },
    image: { url: '', fileList: [] },
    miniProgram: { miniAppName: '', miniAppCodeImg: '', fileList: [] },
    polling: { items: [{ type: 1, url: '' }] },
    group: {
      mainGroupImage: '',
      mainGroupTitle: '主群二维码',
      mainGroupDesc: '扫码进主群',
      backupGroupImage: '',
      backupGroupTitle: '备用群二维码',
      backupGroupDesc: '主群已满可加备用群',
      mainFileList: [],
      backupFileList: []
    }
  })
}

// 图片上传前的验证
// SimpleFileUpload 事件处理方法
const handleImageUploadSuccess = (response: any, file: File) => {
  message.success(`图片 ${file.name} 上传成功`)
}

const handleImageUploadError = (error: any, file: File) => {
  console.error('图片上传失败:', error)
  message.error(`图片 ${file.name} 上传失败`)
}

const handleMiniProgramUploadSuccess = (response: any, file: File) => {
  message.success(`小程序码 ${file.name} 上传成功`)
}

const handleMiniProgramUploadError = (error: any, file: File) => {
  console.error('小程序码上传失败:', error)
  message.error(`小程序码 ${file.name} 上传失败`)
}

const handleMainGroupUploadSuccess = (response: any, file: File) => {
  message.success(`主群二维码 ${file.name} 上传成功`)
}

const handleMainGroupUploadError = (error: any, file: File) => {
  console.error('主群二维码上传失败:', error)
  message.error(`主群二维码 ${file.name} 上传失败`)
}

const handleBackupGroupUploadSuccess = (response: any, file: File) => {
  message.success(`备用群二维码 ${file.name} 上传成功`)
}

const handleBackupGroupUploadError = (error: any, file: File) => {
  console.error('备用群二维码上传失败:', error)
  message.error(`备用群二维码 ${file.name} 上传失败`)
}

// 添加轮询项目
const addPollingItem = () => {
  formData.polling.items.push({ type: 1, url: '' })
}

// 删除轮询项目
const removePollingItem = (index: number) => {
  formData.polling.items.splice(index, 1)
}

// 轮询项目图片上传处理方法
const handlePollingUploadSuccess = (response: any, file: File, index: number) => {
  message.success(`轮询项目图片 ${file.name} 上传成功`)
}

const handlePollingUploadError = (error: any, file: File, index: number) => {
  console.error('轮询项目图片上传失败:', error)
  message.error(`轮询项目图片 ${file.name} 上传失败`)
}

// 删除轮询项目图片
const removePollingImage = (index: number) => {
  formData.polling.items[index].url = ''
}

// 获取轮询项目占位符文本
const getPollingPlaceholder = (type: number) => {
  switch (type) {
    case 1: return '请输入网址链接'
    case 2: return '请输入文本内容'
    case 3: return '请输入WiFi信息JSON格式'
    case 4: return '请输入名片信息JSON格式'
    case 5: return '请输入地理位置JSON格式'
    case 6: return '请上传图片'
    default: return '请输入内容或地址'
  }
}

// URL验证
const validateUrl = () => {
  const url = formData.url.link
  if (!url) {
    urlValidationStatus.value = ''
    urlValidationMessage.value = ''
    return
  }
  
  const urlPattern = /^(https?:\/\/)([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
  if (urlPattern.test(url)) {
    urlValidationStatus.value = 'success'
    urlValidationMessage.value = '网址格式正确'
  } else {
    urlValidationStatus.value = 'error'
    urlValidationMessage.value = '请输入正确的网址格式，如：https://www.example.com'
  }
}

// 电话号码验证
const validatePhone = () => {
  const phone = formData.vcard.phone
  if (!phone) {
    phoneValidationStatus.value = ''
    phoneValidationMessage.value = ''
    return
  }
  
  const phonePattern = /^1[3-9]\d{9}$/
  if (phonePattern.test(phone)) {
    phoneValidationStatus.value = 'success'
    phoneValidationMessage.value = '手机号码格式正确'
  } else {
    phoneValidationStatus.value = 'error'
    phoneValidationMessage.value = '请输入正确的手机号码格式'
  }
}

// 电话号码格式化
const formatPhone = () => {
  let phone = formData.vcard.phone.replace(/\D/g, '')
  if (phone.length > 11) {
    phone = phone.slice(0, 11)
  }
  formData.vcard.phone = phone
}

// 邮箱验证
const validateEmail = () => {
  const email = formData.vcard.email
  if (!email) {
    emailValidationStatus.value = ''
    emailValidationMessage.value = ''
    return
  }
  
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (emailPattern.test(email)) {
    emailValidationStatus.value = 'success'
    emailValidationMessage.value = '邮箱格式正确'
  } else {
    emailValidationStatus.value = 'error'
    emailValidationMessage.value = '请输入正确的邮箱格式'
  }
}

// 地图位置选择处理
const handleLocationChange = (location) => {
  if (location) {
    formData.location.latitude = location.latitude.toString()
    formData.location.longitude = location.longitude.toString()
    formData.location.name = location.name || location.address || ''
  } else {
    formData.location.latitude = ''
    formData.location.longitude = ''
    formData.location.name = ''
  }
}

// 获取图片的 base64 编码
const getBase64 = (img: File, callback: (imageUrl: string) => void) => {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result as string))
  reader.readAsDataURL(img)
}

// 生成二维码
const generateQrCode = async () => {
  // 检查用户登录状态
  if (!userStore.isLoggedIn) {
    message.warning('请先登录后再生成二维码')
    // 保存当前页面状态到sessionStorage，登录成功后恢复
    const currentState = {
      selectedType: selectedType.value,
      formData: JSON.parse(JSON.stringify(formData))
    }
    sessionStorage.setItem('qrcode_generation_state', JSON.stringify(currentState))
    // 跳转到登录页面
    router.push('/auth/login')
    return
  }

  if (!selectedType.value) {
    message.warning('请先选择二维码类型')
    return
  }

  const content = getCurrentFormData()
  if (!content) {
    message.warning('请填写必要的内容')
    return
  }

  isGenerating.value = true
  
  // 生成唯一的请求ID用于日志追踪
  const requestId = Date.now().toString(36) + Math.random().toString(36).substr(2)
  console.log(`[QR-${requestId}] 开始生成二维码`)
  
  try {
    const requestData = {
      qrCodeType: selectedType.value,
      qrCodeName: formData.common.name || getDefaultName(),
      content: JSON.stringify(content),
      description: formData.common.description || `${getTypeName(selectedType.value)}二维码`
    }
    
    console.log(`[QR-${requestId}] 请求参数:`, {
      qrCodeType: requestData.qrCodeType,
      qrCodeName: requestData.qrCodeName,
      contentLength: requestData.content.length,
      description: requestData.description
    })
    console.log(`[QR-${requestId}] 详细内容:`, content)

    console.log(`[QR-${requestId}] 调用 apiSuantaiQrcodeCreate...`)
    const response = await apiSuantaiQrcodeCreate(requestData)
    
    console.log(`[QR-${requestId}] apiSuantaiQrcodeCreate 响应:`, {
      code: response.code,
      msg: response.msg,
      dataExists: !!response.data,
      qrCodeId: response.data?.qrCodeId
    })
    
    if (response.code === 0 || response.code === 200) {
      qrCodeInfo.value = response.data
      console.log(`[QR-${requestId}] 二维码创建成功，ID: ${response.data.qrCodeId}`)
      message.success('二维码生成成功！')
      
      // 生成网关预览URL
      try {
        console.log(`[QR-${requestId}] 调用 apiGenerateScanUrl，参数: ${response.data.qrCodeId}`)
        const scanUrlResponse = await apiGenerateScanUrl(response.data.qrCodeId)
        
        console.log(`[QR-${requestId}] apiGenerateScanUrl 响应:`, {
          code: scanUrlResponse.code,
          msg: scanUrlResponse.msg,
          dataExists: !!scanUrlResponse.data,
          dataLength: scanUrlResponse.data?.length
        })
        
        if (scanUrlResponse.code === 0 || scanUrlResponse.code === 200) {
          // 构建网关预览URL
          const signedUrl = scanUrlResponse.data
          console.log(`[QR-${requestId}] 签名URL获取成功，长度: ${signedUrl.length}`)
          qrCodeUrl.value = generateGatewayUrl(signedUrl)
          console.log(`[QR-${requestId}] 网关URL生成完成: ${qrCodeUrl.value.substring(0, 100)}...`)
        } else {
          console.warn(`[QR-${requestId}] 获取签名URL失败，使用默认显示:`, scanUrlResponse.msg)
          // 即使获取签名URL失败，也可以显示基本的二维码内容
          qrCodeUrl.value = response.data.content || '二维码内容获取失败'
          console.log(`[QR-${requestId}] 使用备用内容: ${qrCodeUrl.value.substring(0, 50)}...`)
        }
      } catch (error) {
        console.error(`[QR-${requestId}] 获取签名URL异常:`, error)
        console.error(`[QR-${requestId}] 错误详情:`, {
          name: error.name,
          message: error.message,
          stack: error.stack?.substring(0, 200)
        })
        // 即使获取签名URL失败，也可以显示基本的二维码内容
        qrCodeUrl.value = response.data.content || '二维码内容获取失败'
        console.log(`[QR-${requestId}] 使用备用内容: ${qrCodeUrl.value.substring(0, 50)}...`)
      }
    } else {
      console.error(`[QR-${requestId}] 二维码创建失败:`, {
        code: response.code,
        msg: response.msg,
        fullResponse: response
      })
      message.error(response.msg || '生成失败')
    }
  } catch (error) {
    console.error(`[QR-${requestId}] 生成二维码异常:`, error)
    console.error(`[QR-${requestId}] 异常详情:`, {
      name: error.name,
      message: error.message,
      stack: error.stack?.substring(0, 300)
    })
    message.error('生成失败，请稍后重试')
  } finally {
    console.log(`[QR-${requestId}] 二维码生成流程结束`)
    isGenerating.value = false
  }
}

// 获取当前表单数据
const getCurrentFormData = () => {
  switch (selectedType.value) {
    case 1: // 网址链接
      return formData.url.link ? formData.url : null
    case 2: // 文本内容
      return formData.text.content ? formData.text : null
    case 3: // WiFi信息
      return (formData.wifi.ssid && formData.wifi.password) ? formData.wifi : null
    case 4: // 名片信息
      return (formData.vcard.firstName || formData.vcard.lastName) ? formData.vcard : null
    case 5: // 地理位置
      return (formData.location.latitude && formData.location.longitude) ? formData.location : null
    case 6: // 在线图片
      return formData.image.imageUrl ? formData.image : null
    case 7: // 小程序
      return (formData.miniProgram.name && formData.miniProgram.codeImage) ? formData.miniProgram : null
    case 8: // 轮询码
      return formData.polling.items.some(item => item.url) ? formData.polling : null
    case 9: // 群码
      return formData.group.mainGroupImage ? formData.group : null
    default:
      return null
  }
}

// 获取默认名称
const getDefaultName = () => {
  const typeName = QrCodeTypeMap[selectedType.value] || '二维码'
  return `${typeName}_${Date.now()}`
}

// 获取类型名称
const getTypeName = (type: number) => {
  return QrCodeTypeMap[type] || '未知类型'
}

// 获取内容长度
const getContentLength = () => {
  const content = getCurrentFormData()
  return content ? JSON.stringify(content).length : 0
}

// 下载二维码
const downloadQrCode = async () => {
  if (!qrCodeUrl.value) return
  
  try {
    const qrElement = document.querySelector('.qr-image-container canvas')
    if (!qrElement) {
      message.error('未找到二维码，请稍后重试')
      return
    }
    
    const canvas = await html2canvas(qrElement as HTMLElement, {
      useCORS: true,
      backgroundColor: null,
      scale: 2
    })
    
    const dataUrl = canvas.toDataURL('image/png')
    const link = document.createElement('a')
    link.href = dataUrl
    link.download = `qrcode_${Date.now()}.png`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    message.success('下载成功！')
  } catch (error) {
    console.error('下载失败:', error)
    message.error('下载失败，请重试')
  }
}

// 复制二维码链接
const copyQrCodeUrl = async () => {
  if (!qrCodeUrl.value) return
  
  try {
    await navigator.clipboard.writeText(qrCodeUrl.value)
    message.success('链接已复制到剪贴板！')
  } catch (error) {
    console.error('复制失败:', error)
    message.error('复制失败，请手动复制')
  }
}

// 分享二维码
const shareQrCode = async () => {
  if (!qrCodeUrl.value) return
  
  if (navigator.share) {
    try {
      await navigator.share({
        title: '蒜苔二维码',
        text: '查看我生成的二维码',
        url: window.location.origin + qrCodeUrl.value
      })
    } catch (error) {
      await copyQrCodeUrl()
    }
  } else {
    await copyQrCodeUrl()
  }
}

// 返回首页
const goBack = () => {
  router.push('/')
}

// 跳转到管理后台
const goToAdmin = () => {
  // 携带当前token信息跳转到后台，避免重新登录
  router.push('/admin/dashboard')
}

// 跳转到蒜苔解码器
const goToDecoder = () => {
  router.push('/qrcode/decoder')
}

// 生成网关URL
const generateGatewayUrl = (signedUrl: string) => {
  const requestId = Date.now().toString(36) + Math.random().toString(36).substr(2);
  console.log(`[Gateway-${requestId}] 开始生成网关URL`);
  console.log(`[Gateway-${requestId}] 输入签名URL: ${signedUrl}`);
  
  try {
    const url = new URL(signedUrl)
    const id = url.searchParams.get('id')
    const sign = url.searchParams.get('sign')
    
    console.log(`[Gateway-${requestId}] 解析参数:`, {
      id: id,
      sign: sign ? `${sign.substring(0, 10)}...` : null,
      hasId: !!id,
      hasSign: !!sign
    });

    if (!id || !sign) {
      console.warn(`[Gateway-${requestId}] 缺少必要参数，返回原始URL`);
      return signedUrl
    }
    const baseUrl = window.location.origin
    // 使用环境变量配置的网关URL，如果没有配置则使用局域网IP
    // const baseUrl = import.meta.env.VITE_GATEWAY_BASE_URL || 'http://192.168.135.80:3000'
    const gatewayUrl = `${baseUrl}/api/anon/qrcode/scan-json?id=${encodeURIComponent(id)}&sign=${encodeURIComponent(sign)}`
    
    console.log(`[Gateway-${requestId}] 生成网关URL成功:`, {
      baseUrl: baseUrl,
      finalUrl: `${gatewayUrl.substring(0, 100)}...`,
      urlLength: gatewayUrl.length
    });
    
    return gatewayUrl
  } catch (error) {
    console.error(`[Gateway-${requestId}] 生成网关URL异常:`, {
      error: error.message,
      name: error.name,
      inputUrl: signedUrl,
      stack: error.stack?.substring(0, 200)
    });
    console.log(`[Gateway-${requestId}] 返回原始URL作为备用`);
    return signedUrl
   }
 }

// 页面加载时恢复状态
onMounted(() => {
  const savedState = sessionStorage.getItem('qrcode_generation_state')
  if (savedState && userStore.isLoggedIn) {
    try {
      const state = JSON.parse(savedState)
      // 恢复选择的二维码类型
      if (state.selectedType) {
        selectedType.value = state.selectedType
      }
      // 恢复表单数据
      if (state.formData) {
        Object.assign(formData, state.formData)
      }
      // 清除保存的状态
      sessionStorage.removeItem('qrcode_generation_state')
      // 自动执行生成操作
      message.success('已恢复之前填写的内容，正在生成二维码...')
      setTimeout(() => {
        generateQrCode()
      }, 500)
    } catch (error) {
      console.error('恢复状态失败:', error)
      sessionStorage.removeItem('qrcode_generation_state')
    }
  }
})
</script>

<style scoped>
.qrcode-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
  margin-bottom: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
  pointer-events: none;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.logo-icon {
  font-size: 32px;
  color: white;
}

.title-section {
  flex: 1;
}

.page-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
}

.page-subtitle {
  margin: 4px 0 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 400;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.welcome-text {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.admin-btn {
  height: 36px;
  border-radius: 6px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  transition: all 0.3s ease;
}

.admin-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  transform: translateY(-1px);
}

.back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 12px;
  height: 44px;
  padding: 0 20px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  transform: translateY(-1px);
}

.type-selection-section {
   background: white;
   border-bottom: 1px solid #f0f0f0;
   padding: 20px 0;
 }
 
 .type-selection-content {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 32px;
 }

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  align-items: start;
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.right-panel {
  position: sticky;
  top: 32px;
}

.content-input-section,
.preview-section {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.generate-section {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  margin-top: 24px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.title-icon {
  font-size: 24px;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.type-grid.horizontal {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0;
}

.type-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 2px solid #f0f2f5;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fafbfc;
  position: relative;
  overflow: hidden;
}

.type-card.compact {
  min-width: 140px;
  padding: 12px 16px;
  flex-shrink: 0;
  flex-direction: column;
  text-align: center;
  gap: 8px;
}

.type-card.compact .type-icon {
  font-size: 24px;
  width: 36px;
  height: 36px;
  margin: 0 auto;
}

.type-card.compact .type-name {
  font-size: 14px;
  margin-bottom: 0;
}

.type-card.compact .type-desc {
  display: none;
}

.type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(24, 144, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.type-card:hover {
  border-color: #1890ff;
  background: #f6f9ff;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(24, 144, 255, 0.15);
}

.type-card:hover::before {
  opacity: 1;
}

.type-card.active {
  border-color: #1890ff;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
  box-shadow: 0 12px 40px rgba(24, 144, 255, 0.4);
  transform: translateY(-2px);
}

.type-card.active::before {
  opacity: 0;
}

.type-icon {
  font-size: 28px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.type-card.active .type-icon {
  color: white;
}

.type-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.type-card.compact .type-info {
  text-align: center;
}

.type-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}

.type-card.compact .type-name {
  font-size: 14px;
  margin-bottom: 0;
}

.type-desc {
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.4;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.type-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group.half {
  flex: 1;
}

.input-row {
  display: flex;
  gap: 16px;
}

.input-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.required {
  color: #ff4d4f;
}

.input-field {
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
  font-size: 14px;
}

.input-field:focus,
.input-field:hover {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.input-prefix-icon {
  color: #8c8c8c;
}

.image-uploader {
  width: 120px;
  height: 120px;
}

.image-uploader :deep(.ant-upload) {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  border: 2px dashed #d9d9d9;
  transition: all 0.3s ease;
}

.image-uploader :deep(.ant-upload:hover) {
  border-color: #1890ff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8c8c8c;
}

.upload-placeholder .anticon {
  font-size: 24px;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 12px;
}

.upload-tip {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 8px;
}

.polling-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.polling-item {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 16px;
  background: #fafafa;
}

.polling-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.polling-item-title {
  font-weight: 600;
  color: #1a1a1a;
}

.polling-item-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.add-polling-btn {
  border-radius: 12px;
  height: 44px;
  border-style: dashed;
  border-color: #d9d9d9;
  color: #8c8c8c;
  transition: all 0.3s ease;
}

.add-polling-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.group-section {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  background: #fafafa;
}

.group-section:last-child {
  margin-bottom: 0;
}

.group-section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
}

.generate-section {
  margin-top: 8px;
}

.generate-btn {
  height: 52px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.generate-btn:hover {
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(24, 144, 255, 0.4);
}

.generate-btn:active {
  transform: translateY(0);
}

.preview-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qrcode-display {
  text-align: center;
}

.qr-image-container {
  padding: 24px;
  background: #fafafa;
  border-radius: 12px;
  margin-bottom: 24px;
}

.qrcode-image {
  width: 240px;
  height: 240px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  background: white;
  padding: 16px;
  margin: 0 auto 20px;
}

.qrcode-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qrcode-info {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e8;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: #666;
  font-size: 13px;
}

.info-value {
  color: #1a1a1a;
  font-weight: 500;
  font-size: 13px;
}

.qr-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  height: 44px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.empty-content {
  text-align: center;
  color: #8c8c8c;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #1a1a1a;
}

.empty-text {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .right-panel {
    position: static;
  }
}

@media (max-width: 768px) {
  .qrcode-container {
    padding: 0;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 20px;
  }
  
  .logo-section {
    flex-direction: column;
    gap: 12px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .page-subtitle {
    font-size: 14px;
  }
  
  .main-content {
    padding: 20px;
  }
  
  .type-grid {
    grid-template-columns: 1fr;
  }
  
  .input-row {
    flex-direction: column;
  }
  
  .qrcode-image {
    width: 200px;
    height: 200px;
  }
}

.validation-message {
  font-size: 12px;
  margin-top: 4px;
  
  &.success {
    color: #52c41a;
  }
  
  &.error {
    color: #ff4d4f;
  }
}
</style>